<template>
  <div class="flex_space_between login_container">
    <div class="flex_end login_bg"></div>
    <div class="login_container_form">
      <div class="login_logo flca">
        <div class="login_box flc">
          <div class="fs26 cGR flca wp100"><img src="@/assets/img/logo.png" class="w68 h68" /></div>
          <div class="fs26 cGR wp100 tc">万象掌柜</div>
          <div class="fs12 cGR wp100 tc">wanxiangzhanggui</div>
        </div>
      </div>
      <div class=" login_container_formContent ml80">
        <el-form ref="form" class="login_form  " :model="params">
          <el-form-item prop="username">
            <label class="login_label mb12">用户名</label>
            <el-input v-model="params.username" placeholder="请输入用户名" clear="pub_input  pub_input_search" :maxlength="11">
              <img slot="prefix" src="@/assets/img/loginRegister/user.png" class="pub_imgSize16" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <label class="login_label ">密码</label>
            <el-input v-model="params.password" :type="isShowPas ? 'text' : 'password'" placeholder="请输入密码" class="pub_input  mt12 pub_input_search" :maxlength="15">
              <img slot="prefix" src="@/assets/img/loginRegister/password.png" class="pub_imgSize16" />
              <img v-show="!isShowPas" slot="suffix" src="@/assets/img/loginRegister/lookPassword.png" class="pub_imgSize16" @click="showPassword" />
              <img v-show="isShowPas" slot="suffix" src="@/assets/img/loginRegister/closePassword.png" class="pub_imgSize16" @click="showPassword" />
            </el-input>
          </el-form-item>
        </el-form>
        <div class="login_tips-container flb">
          <div class="flcv flex_center">
            <el-checkbox v-model="agreementChecked">
              我已阅读并同意
              <span class="agreement-link cGR" @click.stop="gotoAgreement">《万象掌柜用户协议》</span>
            </el-checkbox>
          </div>
          <div class="login_tips" @click="goPage('forget')">忘记密码?</div>
        </div>
        <el-button type="text" class="mt24 pub_button login_button " @click="login">
          登录
        </el-button>
        <div class="login_goReigister flex_center mt24">
          <span>还没有账号? </span>
          <span class="login_goReigister_text ml5 cGR" @click="goPage('register')">去注册</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowPas: false, //显示密码
      agreementChecked: false, //用户协议勾选状态
      inviteCode: '', // 邀请码
      params: {
        loginType: '2',
        password: '', //密码
        username: '' //用户名
      }
    };
  },
  mounted() {
    // 读取本地存储的用户协议勾选状态
    const savedAgreement = localStorage.getItem('agreementChecked');
    if (savedAgreement !== null) {
      this.agreementChecked = savedAgreement === 'true';
    }
    // 获取URL参数中的inviteCode
    if (this.$route.query && this.$route.query.inviteCode) {
      this.inviteCode = this.$route.query.inviteCode;
    }
  },
  methods: {
    //显示密码框
    showPassword() {
      this.isShowPas = !this.isShowPas;
    },
    //登录
    login() {
      const { password, username } = this.params;
      if (!username) {
        return this.$message.warning('请输入用户名');
      }
      if (!password) {
        return this.$message.warning('请输入密码');
      }
      if (!this.agreementChecked) {
        return this.$message.warning('请先勾选用户协议');
      }
      // 保存勾选状态到本地存储
      localStorage.setItem('agreementChecked', 'true');
      this.$api.post(this.$url.login, this.params).then(response => {
        if (response.code == 200) {
          localStorage.setItem('lastActivityTime', new Date().getTime());
          this.$bus.$emit('timeLogout');
          let roleType = null;
          if (response.data.roleCode === 'ADMIN') {
            roleType = 1; //超级管理员
          } else if (response.data.roleCode === 'ADMINISTRATOR') {
            roleType = 2; //普通管理员
          } else {
            roleType = 3; //普通员工
          }
          response.data.roleType = roleType;
          this.$store.commit('setUserInfo', response.data);
          this.$store.commit('setToken', response.data.token);
          if (this.$route.query?.redirect) {
            this.$router.push({ path: this.$route.query?.redirect });
          } else {
            this.goPage(roleType === 1 ? 'layout/goods' : 'layout/orderManagement');
          }
        }
      });
    },
    goPage(pageUrl) {
      // 如果跳转到注册页面且存在inviteCode，则携带参数
      if (pageUrl === 'register' && this.inviteCode) {
        this.$router.push({
          path: '/' + pageUrl,
          query: { inviteCode: this.inviteCode }
        });
      } else {
        this.$router.push({ path: '/' + pageUrl });
      }
    },
    // 跳转到用户协议页面
    gotoAgreement() {
      this.$router.push({ path: '/agreement' });
    }
  }
};
</script>
<style lang="less" scoped>
.login_tips-container {
  width: 400px;
  margin: 12px 0;
  .login_tips {
    font-size: 14px;
    color: #1eb398;
    text-align: right;
    text-decoration-line: underline;
    cursor: pointer;
  }
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #667085 !important;
}
.agreement-link {
  color: #27c1a5;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
</style>
